
<script type="text/javascript">
    $(document).ready(function(){
        // Change this to the location of your server-side upload handler:
        var url = window.location.hostname === 'blueimp.github.io' ?
        '//jquery-file-upload.appspot.com/' : '~upload/upload';
        $('.upload').click(function(){
            $('.process_bar div').css('width','0%');
            $('.process_bar').css('display','block');
            var data = $(this).data();
            data.submit();
        });
        $('.fileupload').fileupload({
            url: url,
            dataType: 'json',
            autoUpload : false,
            add: function(e, data){
                $('.bt_upload').data(data);
                $('.file_name').val(data.files[0].name);
                $.loadImg(data.files[0] , '.upload_block_preview');
                $('.confirm_upload').css('right','0px');
            },
            done: function (e, data) {
                $('.current_file_name').val($('.file_name').val());
                $('.process_bar').fadeOut(1000);
                $('.confirm_upload').css('right','-80px');
                $('.file_name').trigger('change');
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo('#files');
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.process_bar div').css('width',progress + '%');
            }
        }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
        $('.bt_upload').click(function(){
            $('.process_bar div').css('width','0%');
            $('.process_bar').css('display','block');
            var data = $(this).data();
            data.submit();
        });
        $('.bt_cancel_upload').click(function(){
             $('.file_name').val( $('.current_file_name').val());
            var currentLinkImage = $(this).closest('.upload_block').find('.current_file_name').val();
            $('.confirm_upload').css('right','-80px');
            $(this).closest('.upload_block').find('.upload_block_preview').attr('src',currentLinkImage);
        });
    });
</script>

<div class="upload_block">
    <input type="hidden" class="file_name" id="<?php echo $template->get('id'); ?>" name="<?php echo $template->get('id'); ?>" value="<?php if($template->get('image')){echo URL::getLink($template->get('image'));} ?>">
    <?php if($template->get('isEdit')){ ?>
    <input type="hidden" class="current_file_name" value="<?php if($template->get('image')){echo URL::getLink($template->get('image'));} ?>">
    <div class="upload_block_file_swap">
        <p>Change picture</p>
        <input class="fileupload" type="file" name="files[]" multiple> 
    </div>
    <div class="process_bar">
        <div></div>
    </div>
    <div class="confirm_upload">
        <div class="bt_upload"></div>
        <div class="bt_cancel_upload"></div>
    </div>
    <?php } ?>
    <img class="upload_block_preview" src="<?php if($template->get('image')){echo URL::getLink($template->get('image'));}else{ echo URL::getLink('image/default_image');} ?>" alt="">
</div>
